<template>
  <div class="movie-detail-container">
    <Header v-if="currentFilmInfo" :info="currentFilmInfo"></Header>
    <Filter
      v-if="timeList.length > 0"
      :data="timeList"
      @onChanged="onTimeChanged"
    ></Filter>
    <div class="search-input">
      <CinemaSearchInput @onSearch="onSearch"></CinemaSearchInput>
    </div>
    <div class="search-filter">
      <CinemaSearchFilter
        @onRegionChanged="onRegionChanged"
      ></CinemaSearchFilter>
    </div>
    <div class="list-container">
      <div
        class="list-item-container"
        v-for="(item, index) in list"
        :key="index"
      >
        <CinemaItem :info="item" @click="onClickItem(item)"></CinemaItem>
      </div>
      <Loading
        v-if="list.length > 0"
        :page="pageInfo.current_page"
        :total="pageInfo.last_page"
        :loadingFlag="loadingFlag"
        :tipFlag="tipFlag"
      ></Loading>
      <div style="height: 10px"></div>

      <!-- 空状态 -->
      <template v-if="list.length === 0 && !loading && currentFilmInfo">
        <nut-empty description="无数据"></nut-empty>
      </template>
      <!-- 加载状态 -->
      <template v-if="list.length === 0 && loading">
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
          width="100%"
          height="15px"
          title
          animated
          row="3"
        >
        </nut-skeleton>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { needLocation } from "../../utils/needLocationHook";
export default {
  name: "Cinema",
  mixins: [needLocation],
};
</script>

<script setup lang="ts">
import Header from "./header.vue";
import Filter from "./filter.vue";
import CinemaSearchInput from "../../components/cinema-search-input/index.vue";
import CinemaSearchFilter from "../../components/cinema-search-filter/index.vue";
import CinemaItem from "../../components/cinema/item.vue";
import Loading from "../../components/Loading/index.vue";

import { onMounted, ref, reactive, watch } from "vue";
import { storeToRefs } from "pinia";
import Taro from "@tarojs/taro";
import { useLocationStore } from "../../store";
import * as cinemaApi from "../../api/cinema";
import * as movieApi from "../../api/movie";
import { useReachBottom } from "@tarojs/taro";

const list: any = ref([]);
const timeList = ref([]);
const loading = ref(false);
const router = Taro.useRouter();
const currentFilmId: any = ref(null);
const currentFilmInfo = ref(null);
const locationStore = useLocationStore();
const { selectCityinfo } = storeToRefs(locationStore);
let pageInfo = reactive({
  current_page: 1,
  page_size: 5,
  total: 0,
  last_page: 0,
});
let loadingFlag = ref(false);
let tipFlag = ref(false); // "数据过多 提示文字一开始让他隐藏 当数据getData() 回来以后 在变成true 使用loading 组件 需要传递这个值"
const timer = ref(null);

const filterInfo = reactive({
  area_id: null,
  searchValue: null,
  date: "",
});
onMounted(() => {
  currentFilmId.value = router.params.film_id;
  getDetails();
});
// 监听筛选信息变化
watch(filterInfo, () => {
  pageInfo.current_page = 1;
  pageInfo.page_size = 5;
  pageInfo.total = 0;
  pageInfo.last_page = 0;
  Taro.showLoading({
    title: "加载中...",
    mask: true,
  });

  getData(true, pageInfo.current_page, pageInfo.page_size, 0);
});
// 监听选择城市变化
watch(
  () => locationStore.selectCityinfo,
  () => {
    pageInfo.current_page = 1;
    pageInfo.page_size = 5;
    pageInfo.total = 0;
    pageInfo.last_page = 0;

    getData(true, pageInfo.current_page, pageInfo.page_size, 0);
  }
);
//滚动到底部分页处理函数 status 状态 1:分页 0:筛选
useReachBottom(() => {
  console.log("onReachBottom");
  loadingFlag.value = true;

  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    if (pageInfo.current_page <= pageInfo.last_page) {
      pageInfo.current_page++;

      getData(true, pageInfo.current_page, pageInfo.page_size, 1);
    } else {
      Taro.showToast({
        title: "没有更多数据了呢",
        icon: "none",
      });
    }
  }, 1000);
});

const onClickItem = (data) => {
  const { cinemaid, down_price } = data;
  if (down_price === "0.00") {
    return false;
  }
  const film_id = currentFilmId.value;
  Taro.navigateTo({
    url: `/pages/cinema-detail/index?cinema_id=${cinemaid}&film_id=${film_id}`,
  });
};
const onTimeChanged = (data) => {
  const { time } = data;
  filterInfo.date = time;
};
const onSearch = (value) => {
  filterInfo.searchValue = value;
};
const onRegionChanged = (value) => {
  if (value === 0) {
    filterInfo.area_id = null;
  } else {
    filterInfo.area_id = value;
  }
};
const getDetails = async () => {
  const { cityId } = selectCityinfo.value;
  const data = {
    film_id: currentFilmId.value,
    city_id: cityId,
  };
  const res: any = await movieApi.detail(data);
  currentFilmInfo.value = res.film_info;
  timeList.value = res.show_list;
};
const getData = async (isRefresh, current_page, page_size, status) => {
  // if (isRefresh) {
  //   list.value = [];
  //   pageInfo = {
  //     current_page: 1,
  //     page_size: 10,
  //   };
  // }
  const { cityId } = selectCityinfo.value;
  const data = {
    film_id: currentFilmId.value,
    city_id: cityId,
    page_size: page_size,
    current_page: current_page,
    area_id: filterInfo.area_id,
    keyword: filterInfo.searchValue,
    date: filterInfo.date,
    latitude: locationStore.latitude,
    longitude: locationStore.longitude,
  };
  loading.value = true;
  loadingFlag.value = false;
  tipFlag.value = true;
  const res: any = await cinemaApi.listByMovie(data);
  pageInfo.total = res.total;
  pageInfo.last_page = res.last_page;
  // res.data.forEach((item) => {
  //   list.value.push(item);
  // });
  // loading.value = false;
  console.log(res.data, list.value, "popopo");
  if (status) {
    list.value = [...list.value, ...res.data];
    loading.value = false;
  } else {
    list.value = [];
    list.value = res.data;
    loading.value = false;
  }
  Taro.hideLoading();

  console.log(list.value, "123");
};
</script>
<style lang="scss">
.movie-detail-container {
  display: flex;
  flex-direction: column;
  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .list-item-container {
    padding: 0 0.5rem 0.5rem 0.5rem;
  }
  .list-item-container:first-of-type {
    padding-top: 0.5rem;
  }
  .list-item-container:last-of-type {
    padding-bottom: 0.5rem;
  }
}
</style>
